<template>
  <div class="layout-container">
    <!-- 左侧菜单栏 -->
    <div
        class="sidebar"
        :class="{'is-collapse': isCollapse}"
        @mouseenter="hoverMenu = true"
        @mouseleave="hoverMenu = false"
    >
      <div class="logo-container">
        <el-avatar
            src="/imgs/admin/logo.png"
            :size="isCollapse ? 36 : 40"
            class="logo"
        />
        <transition name="fade">
          <span v-show="!isCollapse" class="system-name">智慧旅游管家</span>
        </transition>
      </div>

      <el-menu
          background-color="#020f21"
          text-color="#fff"
          active-text-color=#020ff1
          :collapse="isCollapse"
          :collapse-transition="false"
          unique-opened
          router
      >
        <!-- 菜单项保持原有结构 -->
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <Setting/>
            </el-icon>
            <span>用户管理</span>
          </template>

          <el-menu-item index="/user">
            <el-icon>
              <Setting/>
            </el-icon>
            <span>用户列表</span>
          </el-menu-item>
        </el-sub-menu>


        <el-sub-menu index="2">
          <template #title>
            <el-icon>
              <Setting/>
            </el-icon>
            <span>景区管理</span>
          </template>
          <el-menu-item index="/scenic" class="el-menu">
            <el-icon>
              <Setting/>
            </el-icon>
            <span>景点管理</span>
          </el-menu-item>

        </el-sub-menu>


        <el-sub-menu index="3">
          <template #title>
            <el-icon>
              <Setting/>
            </el-icon>
            <span>论坛管理</span>
          </template>
          <el-menu-item index="/strategy" class="el-menu">
            <el-icon>
              <Setting/>
            </el-icon>
            <span>文章管理</span>
          </el-menu-item>


          <el-menu-item index="/comment" class="el-menu">
            <el-icon>
              <Setting/>
            </el-icon>
            <span>评论管理</span>
          </el-menu-item>

          <!-- 其他菜单项内容 -->
        </el-sub-menu>

      </el-menu>
    </div>

    <!-- 右侧内容区域 -->
    <div class="main-container" :style="{marginLeft: sidebarWidth}">
      <!-- 顶部导航栏保持原有结构 -->
      <el-header class="header" style="background-color: #fff;height: 60px">

        <el-row>
          <el-col :span="6" style="padding-top: 20px">
            <el-button type="text" @click="toggleCollapse">
              <el-icon>
                <Menu/>
              </el-icon>
            </el-button>
          </el-col>
          <el-col :span="14" style="padding-top: 20px">
          </el-col>
          <el-col :span="4" style="display: flex;justify-content: flex-start; align-items: center; ">
            <!--            头像-->
            <el-dropdown>
          <span class="el-dropdown-link">
               <div class="demo-type" style="padding-top: 8px">
                    <el-avatar :size="40" :src=userInfo.avatar @error="errorHandler">
                      <img :src=userInfo.avatar>
                    </el-avatar>
                  </div>
          </span>

<!--              下拉菜单-->
              <template #dropdown>
                <!-- 折叠按钮和用户信息 -->
                <el-dropdown-menu>
                  <el-dropdown-item @click="personalData">个人资料</el-dropdown-item>
                  <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-icon><CaretBottom /></el-icon>
            <span style="padding-left: 10px;font-size: 16px;font-weight: bold">欢迎回来！！{{userInfo.username}}</span>

          </el-col>

        </el-row>



      </el-header>

      <!--      页头  面包屑-->
      <div style="margin-top: 1px;background-color: #ffffff;padding: 10px 20px;">

            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item v-for="item in breadcrumb">{{item}}</el-breadcrumb-item>
            </el-breadcrumb>

      </div>


      <!-- 内容区域 -->
      <el-main class="content" style="padding: 0;margin: 0;overflow: hidden">
        <router-view/>
      </el-main>
    </div>
  </div>
</template>



<script setup>
import {ref, computed, watch, onMounted} from 'vue'
import axios from 'axios';
import {ElMessage} from 'element-plus';
import {useRoute, useRouter} from 'vue-router';


const isCollapse = ref(false)
const hoverMenu = ref(false)
const avatarurl = getUser().avatar
//头像
const errorHandler = () => true

// 计算侧边栏宽度
const sidebarWidth = computed(() => {
  return isCollapse.value ? '64px' : '208px'
})

// watch(hoverMenu, (newVal) => {
//   if (window.innerWidth > 768) {
//     isCollapse.value = !newVal
//   }
// })
//跳转查看个人信息
const personalData = () => {
  router.push('/personalData')
}
// 切换菜单折叠状态
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

const userInfo=ref(getUser())




//退出方法
//定义退出登录的方法
const logout = ()=>{
  if(confirm('您确认要退出登录吗?')){
    //退出时:清空localStorage中的user数据
    localStorage.removeItem('user');
    //跳转回登录页
    window.location.href = '/login';
    //清空user变量
    userInfo.value = '';
  }
}

//定义数组用来维护当前面包屑导航显示的值
const breadcrumb = ref();
//定义对象用来维护路由path与面包屑数组值的对应关系
let map = {
  '/user':['用户管理'],
  '/strategy':['文章管理'],
  '/comment':['评论管理']

};
//useRoute()是vue路由器提供的一个API,用来访问当前组件的路由状态数据,获取的是当前路由对象
const route = useRoute();
//定义方法,每次路由发生变化时,立即触发
const updateBreadcrumb = (route)=>{
  //取出当前路由的path值
  const path = route.path;
  //从map对象中取出此path对应的面包屑数组值,并设置默认值['用户管理','用户列表']
  breadcrumb.value = map[path] || ['用户管理'];
}
//一进到页面立即执行的方法onMounted()
onMounted(()=>{
  updateBreadcrumb(route);
})
//获取一个路由器对象
const router = useRouter();
//监听路由的变化,如果发生了改变
router.beforeEach((to, from, next)=>{
  //立即更新面包屑的值
  updateBreadcrumb(to);
  //再进行路由跳转
  next();
})


</script>

<style scoped>
.layout-container {
  display: flex;
  min-height: 100vh;
  background: #f0f2f5;
}

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1000;
  width: 208px;
  background: #020f21;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

.sidebar.is-collapse {
  width: 64px;
  border-radius: 20px;
}

.logo-container {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 16px;
  transition: padding 0.3s;
}

.logo {
  transition: all 0.3s;
  flex-shrink: 0;
}

.system-name {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin-left: 12px;
  white-space: nowrap;
  transition: opacity 0.3s;
}

/* 菜单项过渡效果 */
.el-menu {
  border-right: none;
  transition: width 0.3s;
}

.el-menu--collapse {
  width: 64px;
}

/* 折叠时的微调 */
.sidebar.is-collapse .logo-container {
  padding: 0 14px;
}

/* 内容区域动画 */
.main-container {
  flex: 1;
  margin-left: 208px;
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 文字渐隐动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 响应式处理 */
@media (max-width: 768px) {
  .sidebar {
    width: 64px !important;
    transform: translateX(-100%);
    transition: transform 0.3s;
  }

  .sidebar.is-active {
    transform: translateX(0);
  }

  .main-container {
    margin-left: 0 !important;
  }
}
</style>

